<template>
  <Modal :footer-hide="true" :value="showModal" title="添加商品类别" @on-cancel="closeModal">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem label="商品类别名称" prop="typeName">
        <Input v-model="formData.typeName" placeholder="请输入商品类别名称"></Input>
      </FormItem>
      <FormItem label="商品类别编号" prop="typeCode">
        <Input v-model="formData.typeCode" placeholder="请输入商品类别编号"></Input>
      </FormItem>
      <FormItem label="父级类别" prop="typeParentId">
        <Select v-model="formData.typeParentId" :clearable=true placeholder="父级类别">
          <Option v-for="item in typeList" :key="item.typeCode" :value="item.id">{{ item.typeName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="类别级别" prop="typeLevel">
        <Select v-model="formData.typeLevel" :disabled="true" placeholder="类别级别">
          <Option :key="1" :value=1>一级</Option>
          <Option :key="2" :value=2>二级</Option>
        </Select>
      </FormItem>
      <Button type="primary" @click="addType">添加</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        typeLevel: 1
      },
      typeList: [],
      typeMap: new Map(),
      rules: {
        typeName: [
          {
            required: true,
            message: '商品类别名称不能为空',
            trigger: 'blur'
          }
        ],
        typeCode: [
          {
            required: true,
            message: '商品类别编号不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    // 'showModal'(val) {
    //   if (val) {
    //     console.log(444)
    //     // this.formData = this.formData;
    //   }
    // },
    'formData.typeParentId'(val) {
      // console.log(444)
      if (val) {
        this.formData.typeLevel = this.typeMap.get(val) + 1;
      } else {
        this.formData.typeLevel = 1;
      }
    }
  },
  methods: {
    // 新增商品类型
    addType() {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._addType()
          this.closeModal()
          this.$emit('reloadTable')
        }
      })
    },
    // 关闭页面
    closeModal() {
      this.formData = {
        typeLevel: 1
      }
      this.$emit('closeModal')
    },
    _addType() {
      const url = '/goodsType/add'
      const res = this.POST_DATA({
        dataUrl: url,
        name: this.formData.name,
        typeCode: this.formData.typeCode,
        typeName: this.formData.typeName,
        typeImgUrls: this.formData.typeImgUrls,
        typeParentId: this.formData.typeParentId,
        typeLevel: this.formData.typeLevel
      })
      if (res) {
        this.$Message.success('操作成功')
      }
    },
    // 获取一级商品类别数据
    async _getTypeList() {
      this.loading = true
      const url = '/goodsType/list?s_typeLevel=1'
      const res = await this.GET_DATA({
        dataUrl: url,
      })
      if (res) {
        this.$nextTick(() => {
          this.typeList = res.data.filter(item => {
            if (item.typeLevel) {
              return item;
            }
          })
          this.typeList.forEach(item => (this.typeMap.set(item.id, item.typeLevel)));
        })
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA',
      POST_DATA: '_POST_DATA',
    })
  },
  mounted() {
    this._getTypeList()
  },
}
</script>